<template>
	<!-- 密码登陆 -->
	<view class="login_container" v-if="loginYan == 1">
		<view class="login_top">
			<image src="../../static/login/left.png" mode="" @click="goback"></image>
			<!-- <view class="login_yan" @click="showYan">
				验证码登陆
			</view> -->
		</view>
		<view class="login_hello">
			您好，
		</view>
		<view class="login_welcome">
			<text style="color: #999999;">欢迎来到徕吧，立即</text>
			<text style="color: #06923D; margin-left: 15rpx;" @click="goRegister">注册</text>
		</view>
		<u-form-item style="margin-top: 118rpx;"><u-input placeholder="请输入手机号" v-model="phoneValue"/></u-form-item>
		<u-form-item><u-input placeholder="请输入密码" type="password" v-model="passwordValue"/></u-form-item>
		<view class="login_agree">
			<image :src="btnUrl" mode="" @click="showBtn"></image>
			<text style="margin-left: 20rpx; color: #06923D;" @click="toxiyi">同意《徕吧用户服务协议》</text>
		</view>
		<view class="login_footer">
			<view class="login_back" @click="resetPad">
				找回密码
			</view>
			<!-- <view :class="btnShow == false? 'login_btnN' : 'login_btnY'">
				登陆
			</view> -->
			<view v-if="btnShow == false" class="login_btnN">
				登陆
			</view>
			<view v-else class="login_btnY" @click="loginBtn">
				登陆
			</view>
		</view>
	</view>
	<!-- 验证码登陆 -->
	<view class="login_container" v-else-if="loginYan == 2">
		<view class="login_top">
			<image src="../../static/login/left.png" mode="" @click="goback"></image>
		</view>
		<view class="login_hello">
			您好，
		</view>
		<view class="login_welcome">
			<text style="color: #999999;">欢迎来到徕吧，使用验证码登陆</text>
		</view>
		<u-form-item style="margin-top: 118rpx;"><u-input placeholder="请输入手机号码" v-model="phoneValue2"/></u-form-item>
		<view class="login_footer">
			<view class="login_back">
				&nbsp;
			</view>
			<view v-if="btnShow2 == false" class="login_getN">
				获取验证码
			</view>
			<view v-else class="login_getY" @click="goLogin">
				获取验证码
			</view>
		</view>
	</view>
	<!-- 填写验证码 -->
	<view class="login_container" v-else-if="loginYan == 3">
		<view class="login_top">
			<image src="../../static/login/left.png" mode="" @click="goback"></image>
		</view>
		<view class="login_hello">
			填写验证码
		</view>
		<view class="login_welcome">
			<text style="color: #999999;font-size: 24rpx;">验证码已发送至 186-5689-568</text>
		</view>
		<u-form-item style="margin-top: 40rpx;">
			<u-input placeholder="请输入验证码" v-model="yanValue"/>
			<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
			@change="codeChange"></u-verification-code>
			<u-button @tap="getCode">{{tips}}</u-button>
		</u-form-item>
		<view class="login_agree">
			<image :src="btnUrl1" mode="" @click="showBtn1"></image>
			<text style="margin-left: 20rpx; color: #06923D;">同意《徕吧用户服务协议》</text>
		</view>
		<view class="login_footer">
			<view class="login_back">
				&nbsp;
			</view>
			<view v-if="btnShow3 == false" class="login_getN">
				确认
			</view>
			<view v-else class="login_getY" @click="goIndex">
				确认
			</view>
		</view>
	</view>
	<!-- 找回密码 -->
	<view class="login_container" v-else-if="loginYan == 4">
		<view class="login_top">
			<image src="../../static/login/left.png" mode="" @click="goback"></image>
		</view>
		<view class="login_hello">
			请输入手机号
		</view>
		<u-form-item style="margin-top: 80rpx;"><u-input placeholder="请输入手机号" v-model="phoneValue3"/></u-form-item>
		<view class="login_footer">
			<view class="login_back">
				&nbsp;
			</view>
			<view v-if="btnShow4 == false" class="login_getN">
				下一步
			</view>
			<view v-else class="login_getY" @click="goNext">
				下一步
			</view>
		</view>
	</view>
	<!-- 填写验证码 -->
	<view class="login_container" v-else-if="loginYan == 5">
		<view class="login_top">
			<image src="../../static/login/left.png" mode="" @click="goback"></image>
		</view>
		<view class="login_hello">
			填写验证码
		</view>
		<view class="login_welcome">
			<text style="color: #999999;font-size: 24rpx;">验证码已发送至 {{phoneValue3}}</text>
		</view>
		<u-form-item style="margin-top: 40rpx;">
			<u-input placeholder="请输入验证码" v-model="yanValue2"/>
			<u-verification-code :seconds="seconds2" @end="end2" @start="start2" ref="uCode2" 
			@change="codeChange2"></u-verification-code>
			<u-button @tap="getCode2">{{tips2}}</u-button>
		</u-form-item>
		<view class="login_footer">
			<view class="login_back">
				&nbsp;
			</view>
			<view v-if="btnShow5 == false" class="login_getN">
				确认
			</view>
			<view v-else class="login_getY" @click="goRest">
				确认
			</view>
		</view>
	</view>
	<!-- 找回密码登陆 -->
	<view class="login_container" v-else-if="loginYan == 6">
		<view class="login_top">
			<image src="../../static/login/left.png" mode="" @click="goback"></image>
		</view>
		<view class="login_hello">
			重置密码
		</view>
		<u-form-item style="margin-top: 40rpx;">
			<u-input placeholder="请输入新密码" v-model="passwordValue2"/>
		</u-form-item>
		<view class="login_welcome">
			<text style="color: #999999;font-size: 24rpx;">密码格式应为6-16位数字、字母或符号，不允许有空格</text>
		</view>
		<view class="login_agree">
			<image :src="btnUrl2" mode="" @click="showBtn2"></image>
			<text style="margin-left: 20rpx; color: #06923D;">同意《徕吧用户服务协议》</text>
		</view>
		<view class="login_footer">
			<view class="login_back">
				&nbsp;
			</view>
			<view v-if="btnShow6 == false" class="login_getN">
				完成并登陆
			</view>
			<view v-else class="login_getY" @click="goLogin2">
				完成并登陆
			</view>
		</view>
	</view>
</template>

<script>
	// import {login} from "../../api/login.js"
	export default{
		data(){
			return{
				isShow:false,
				isShow1:false,
				isShow2:false,
				btnUrl:'../../static/login/nosure.png',
				btnUrl1:'../../static/login/nosure.png',
				btnUrl2:'../../static/login/nosure.png',
				loginYan:1,
				phoneValue:'',
				passwordValue:'',
				btnShow:false,
				phoneValue2:'',
				btnShow2:false,
				tips: '',
				// refCode: null,
				seconds: 10,
				yanValue:'',
				btnShow3:false,
				btnShow4:false,
				phoneValue3:'',
				yanValue2:'',
				tips2:'',
				seconds2:60,
				btnShow5:false,
				passwordValue2:'',
				btnShow6:false,
			}
		},
		watch:{
			isShow:{
				handler(val,oldVal){
					if(this.isShow == false){
						this.btnUrl = '../../static/login/nosure.png'
						this.btnShow = false
					}else{
						this.btnUrl = '../../static/balance/arrive.png'
						this.btnShow = true
					}
				}
			},
			isShow1:{
				handler(val,oldVal){
					if(this.isShow1 == false){
						this.btnUrl1 = '../../static/login/nosure.png',
						this.btnShow3 = false
					}else{
						this.btnUrl1 = '../../static/balance/arrive.png',
						this.btnShow3 = true
					}
				}
			},
			isShow2:{
				handler(val,oldVal){
					if(this.isShow2 == false){
						this.btnUrl2 = '../../static/login/nosure.png',
						this.btnShow6 = false
					}else{
						this.btnUrl2 = '../../static/balance/arrive.png',
						this.btnShow6 = true
					}
				}
			},
			// passwordValue2:{
			// 	handler(val,oldVal){
			// 		if(this.passwordValue2 != ''){
			// 			this.btnShow6 = true
			// 		}else{
			// 			this.btnShow6 = false
			// 		}
			// 	}
			// },
			phoneValue2:{
				handler(val,oldVal){
					if(this.phoneValue2 != ''){
						this.btnShow2 = true
					}else{
						this.btnShow2 = false
					}
				}
			},
			phoneValue3:{
				handler(val,oldVal){
					console.log(this.phoneValue3,val)
					if(this.phoneValue3 != ''){
						this.btnShow4 = true
					}else{
						this.btnShow4 = false
					}
				}
			},
			// yanValue:{
			// 	handler(val,oldVal){
			// 		if(this.yanValue != ''){
			// 			this.btnShow3 = true
			// 		}else{
			// 			this.btnShow3 = false
			// 		}
			// 	}
			// },
			yanValue2:{
				handler(val,oldVal){
					if(this.yanValue2 != ''){
						this.btnShow5 = true
					}else{
						this.btnShow5 = false
					}
				}
			},
			deep:true
		},
		methods:{
			// 用户协议
			toxiyi(){
				uni.navigateTo({
					url:"/pages/user/xieyi?type=0"
				})
			},
			loginBtn(){
				uni.request({
				    url: this.baseUrl + '/login/login',
				    dataType: 'json', //默认 json格式
				    method: 'POST', //请求方式
					data:{
						phone:this.phoneValue,
						password:this.passwordValue,
						type:1
					},
				    success: (res) => {
						console.log(res)
				       if(res.data.code == 1){
				       	uni.setStorageSync("userInfo",res.data.data.user)
				       	uni.setStorageSync("token",res.data.data.user.token)
				       	uni.showToast({
				       		title: res.data.msg,
				       		icon: 'none',
				       		duration: 1500,
				       		mask: true
				       	})
				       	setTimeout(()=>{
				       		uni.switchTab({
				       			url:"/pages/index/index"
				       		})
				       	},1500)
				       }else{
				       	uni.showToast({
				       		title: res.data.msg,
				       		icon: 'none',
				       		duration: 1500,
				       		mask: true
				       	})
				       }
				    },
				    fail: (error) => {
				        console.log(error)
				    }
				})
			},
			showBtn(){
				this.isShow = !this.isShow
			},
			showBtn1(){
				this.isShow1 = !this.isShow1
			},
			showBtn2(){
				this.isShow2 = !this.isShow2
			},
			showYan(){
				this.loginYan = 2
			},
			goIndex(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			goLogin(){
				uni.request({
				    url: this.baseUrl + '/login/getCode',
				    dataType: 'json', //默认 json格式
				    method: 'POST', //请求方式
					data:{
						phone:this.phoneValue2
					},
				    success: (res) => {
				        console.log(res)
						if(res.data.code == 1){
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 1500,
								mask: true
							})
						}else{
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 1500,
								mask: true
							})
						}
				    },
				    fail: (error) => {
				        console.log(error)
				    }
				})
				this.loginYan = 3
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('倒计时开始');
			},
			resetPad(){
				// this.loginYan = 4
				uni.navigateTo({
					url:"/pages/user/set/setpad?type=1"
				})
			},
			goNext(){
				this.loginYan = 5
			},
			codeChange2(text) {
				this.tips2 = text;
			},
			getCode2() {
				if(this.$refs.uCode2.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title2: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode2.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end2() {
				this.$u.toast('倒计时结束');
			},
			start2() {
				this.$u.toast('倒计时开始');
			},
			goRest(){
				console.log('2fad')
				this.loginYan = 6
			},
			goLogin2(){
				this.loginYan = 1
			},
			goRegister(){
				uni.navigateTo({
					url:"/pages/login/register"
				})
			},
			goback(){
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-btn--default{
		color: #06923D;
	}
	.login_container{
		padding: 0 60rpx;
		.login_top{
			display: flex;
			justify-content: space-between;
			width: 630rpx;
			height: 48rpx;
			line-height: 48rpx;
			margin-top: 36rpx;
			image{
				width: 65rpx;
				height: 48rpx;
			}
			.login_yan{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #999999;
				opacity: 1;
			}
		}
		.login_hello{
			font-size: 63rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #999999;
			opacity: 1;
			margin-top: 77rpx;
		}
		.login_welcome{
			margin-top: 20rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 400;
			opacity: 1;
		}
		.login_agree{
			margin-top: 60rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 400;
			opacity: 1;
			image{
				width: 32rpx;
				height: 32rpx;
				display: inline-block;
				vertical-align: middle;
			}
		}
		.login_footer{
			display: flex;
			justify-content: space-between;
			height: 86rpx;
			line-height: 86rpx;
			margin-top: 94rpx;
			.login_back{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
				opacity: 1;
			}
			.login_btnN{
				width: 196rpx;
				background: #E2E2E2;
				opacity: 1;
				border-radius: 52rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 86rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 400;
			}
			.login_btnY{
				width: 196rpx;
				background: #06923D;
				opacity: 1;
				border-radius: 52rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 86rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 400;
			}
			.login_getN{
				width: 252rpx;
				height: 86rpx;
				background: #E2E2E2;
				opacity: 1;
				border-radius: 52rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 86rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 400;
			}
			.login_getY{
				width: 252rpx;
				height: 86rpx;
				background: #06923D;
				opacity: 1;
				border-radius: 52rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 86rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 400;
			}
		}
	}
</style>
